সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।
আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ
| এই এলিমেন্টের চারপাশেই বর্ডার ব্যবহার করা হয়েছে। |
এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।
| এই এলিমেন্টের চার পাশেই গোলাকার(round) বর্ডার ব্যবহার করা হয়েছে। |
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বিভিন্ন ধরনের বর্ডার তৈরির জন্য search সিএসএস border-style প্রোপার্টিটি ব্যবহার করা হয়।
নিম্নে border-style প্রোপার্টির জন্য ব্যবহৃত ভ্যালুগুলো দেওয়া হলোঃ
solid - এটি solid বর্ডার ডিফাইন করেdouble - এটি double বর্ডার ডিফাইন করেdotted - এটি dotted বর্ডার ডিফাইন করেdashed - এটি dashed বর্ডার ডিফাইন করেinset - এটি 3D inset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেoutset - এটি 3D outset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেgroove - এটি 3D grooved বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেridge - এটি 3D ridge বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেhidden - এটি বর্ডারকে হিডেন করেnone - কোন বর্ডার ডিফাইন করে নাborder-style প্রোপার্টিতে এক থেকে চারটি পর্যন্ত ভ্যালু থাকতে পারে। এটি ক্রমানুসারে উপরের বর্ডার থেকে শুরু করে ডানপাশে, নিচে এবং বামপাশে গিয়ে শেষ হয়।
<!DOCTYPE html>
<html>
<body>
<h2>border-style প্রোপার্টি</h2>
<p style="border-style: dotted;">একটি dotted বর্ডার।</p>
<p style="border-style: dashed;">একটি dashed বর্ডার।</p>
<p style="border-style: solid;">একটি solid বর্ডার।</p>
<p style="border-style: double;">একটি double বর্ডার।</p>
<p style="border-style: groove;">একটি grooved বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: ridge;">একটি ridge বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: inset;">একটি inset বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: outset;">একটি outset বর্ডার। যেটা border-color এর ভ্যালুর উপর নির্ভর করে।</p>
<p style="border-style: none;">এখানে কোন বর্ডার ব্যবহার করা হয় নাই।</p>
<p style="border-style: hidden;">এটি একটি হিডেন বর্ডার।</p>
<p style="border-style: dotted dashed solid double;">বিভিন্ন ভ্যালু দ্বারা মিশ্রিত একটি বর্ডার।</p>
</body>
</html>বিঃদ্রঃ border-style প্রোপার্টির ভ্যালু সেট করা না হলে বর্ডার সংক্রান্ত অন্যান্য প্রোপার্টিগুলো কাজ করবে না।
একটি এলিমেন্টের চারিদিকের বর্ডারের প্রস্থ সেট করার জন্য border-width প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএসে প্রস্থ নির্ধারণের বিভিন্ন একক যেমনঃ px, pt, cm, em ইত্যাদি ব্যবহার করে বর্ডারের প্রস্থ সেট করা হয় অথবা পূর্ব নির্ধারিত ভ্যালু যেমন thin, medium এবং thick ইত্যাদি ব্যবহার করেও বর্ডারের প্রস্থ সেট করা যায়।
border-width প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলোঃ top border, right border, bottom border এবং left border
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.text1 {
border-style: solid;
border-width: 5px;
}
p.text2 {
border-style: solid;
border-width: medium;
}
p.text3 {
border-style: dotted;
border-width: 2px;
}
p.text4 {
border-style: dotted;
border-width: thick;
}
p.text5 {
border-style: double;
border-width: 15px;
}
p.text6 {
border-style: double;
border-width: thick;
}
p.text7 {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>border-width প্রোপার্টি</h2>
<p class="text1">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text2">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text3">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text4">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text5">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text6">বর্ডার width প্রোপার্টির ব্যবহার</p>
<p class="text7">বর্ডার width প্রোপার্টির ব্যবহার</p>
</body>
</html>বিঃদ্রঃ border-width প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
বর্ডারের কালার সেট করার জন্য border-color প্রোপার্টিটি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
"red""#ff0000""rgb(255,0,0)"border-color প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলো: (top border, right border, bottom border, এবং left border)
border-color নির্ধারণ করা না হলে ইহা উত্তরাধিকার সূত্রে এলিমেন্টকে কালার করে ফেলে।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.text1 {
border-style: solid;
border-color: black;
}
p.text2 {
border-style: solid;
border-color: teal;
}
p.text3 {
border-style: solid;
border-color: green black blue yellow;
}
</style>
</head>
<body>
<h2>border-color property</h2>
<p class="text1">solid red border</p>
<p class="text2">solid green border</p>
<p class="text3">solid multicolor border</p>
</body>
</html>বিঃদ্রঃ border-color প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
আপনি নিশ্চয় আগের উদাহরণেই জানতে পেরেছেন যে একটি এলিমেন্টের চারপাশে পৃথকভাবে বর্ডার সেট করা যায়।
পৃথকভাবে বর্ডার সেট করার প্রত্যেক পাশের বর্ডারের জন্য আলাদাভাবে search সিএসএস প্রোপার্টি ডিক্লেয়ার করতে হয়। (যেমন- top, right, bottom, left)
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
padding: 8px;
}
</style>
</head>
<body>
<p>চারদিকের বর্ডারের স্টাইল দেওয়ার জন্য চারটি প্রোপার্টি ব্যবহার করা হয়েছে।</p>
</body>
</html>
এই উদাহরণটিতেও উপরের উদাহরণের মতো ফলাফল দেখাবেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-style: dotted solid;
padding: 8px;
}
</style>
</head>
<body>
<p>চারপাশের বর্ডারের স্টাইল দেওয়ার একটি শর্টহ্যান্ড প্রোপার্টি ব্যবহার করা হয়েছে।</p>
</body>
</html>
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি border-style প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
dot স্টাইলের হবে।solid স্টাইলের হবে।double স্টাইলের হবে।dashed স্টাইলের হবে।যদি border-style প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
dot স্টাইলের হবে।solid স্টাইলের হবে।double স্টাইলের হবে।
যদি border-style প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
dotted স্টাইলের হবে।solid স্টাইলের হবে।যদি border-style প্রোপার্টিতে একটি ভ্যালু থাকেঃ
dot স্টাইলের হবে।
উপরের উদাহরণে border-style প্রোপার্টি ব্যাবহার দেখানো হয়েছে। যাইহোক, border-style প্রোপার্টির মতোই border-width এবং border-color প্রোপার্টির ক্ষেত্রেও একই নিয়ম প্রযোজ্য।
আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, বর্ডার এর কিছু উপ-বর্ডার প্রোপার্টি রয়েছে এবং এসকল ক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।
তাই কোড সংক্ষিপ্ত করার জন্য, একটি বর্ডার প্রোপার্টির মধ্যে সবগুলো বর্ডার প্রোপার্টি ব্যবহার করা যায়।
নিচের উপ-বর্ডার প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো border:
border-widthborder-style (আবশ্যক)border-color
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border: 5px solid teal;
padding: 8px;
}
</style>
</head>
<body>
<h2>border প্রোপার্টি</h2>
<p>এটি বর্ডারের প্রস্থ(border-width), বর্ডারের স্টাইল(border-style) এবং বর্ডারের
কালার(border-color) একত্রে ব্যবহার করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>
</body>
</html>এছাড়াও আপনি আলাদা আলাদা বর্ডার প্রোপার্টিসমূহকে একটি এলিমেন্টের এক পাশের বর্ডারকে স্টাইল করার জন্য ব্যবহার করতে পারেনঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-left: 6px solid #0099aa;
background-color: lightgrey;
padding: 5px;
}
</style>
</head>
<body>
<h2>border-left প্রোপার্টি</h2>
<p>এটি বাম পাশের বর্ডারের প্রস্থ, স্টাইল এবং কালার নির্দিষ্ট করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
border-bottom: 6px solid #0099aa;
background-color: lightgrey;
padding:5px;
}
</style>
</head>
<body>
<h2>border-bottom প্রোপার্টি</h2>
<p>এটি নিচের পাশের বর্ডারের প্রস্থ, স্টাইল এবং কালার নির্দিষ্ট করার একটি শর্টহ্যান্ড প্রোপার্টি।</p>
</body>
</html>একটি এলিমেন্ট এর চতুর্দিকের বর্ডারকে রাউন্ড করার জন্য border-radius প্রোপার্টিটি ব্যাবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.simple {
border: 3px solid teal;
padding-left: 10px;
}
p.round_border1 {
border: 3px solid teal;
border-radius: 5px;
padding-left: 10px;
}
p.round_border2 {
border: 3px solid teal;
border-radius: 10px;
padding-left: 10px;
}
p.round_border3 {
border: 3px solid teal;
border-radius: 15px;
padding-left: 10px;
}
</style>
</head>
<body>
<h2>border-radius প্রোপার্টি</h2>
<p class="simple">সাধারন বর্ডার(Normal border)</p>
<p class="round_border1">গোল বর্ডার (Round border)</p>
<p class="round_border2">গোলাকার বর্ডার(Rounder border)</p>
<p class="round_border3">Roundest border(গোলাকৃতি বর্ডার)</p>
</body>
</html>বিঃদ্রঃ border-radius প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
